<template>
	<div class="table">
		<div class="container">
			<div class="handle-box flex justify-between">
				<div>					
					<span class="margin-left-sm">关键字：</span>
					<el-input v-model="search_keyName" style="width: 250px;" placeholder="请输入关键字"></el-input>
					<el-button type="primary" class="margin-left-sm" @click="search">搜索</el-button>
				</div>
				<div class="tap-wrap" style="text-align: right;margin-bottom: 20px;">
					<el-button type="success" @click="goAdd">新增</el-button>
					<span style="color:#999;mar">*请先选择厂</span>
				</div>
			</div>
			<el-row :gutter="0">
				<el-col :span="4">
					<p style="margin-bottom: 10px;font-size: 18px;">厂：</p>
					<div class="tree-wrap">
						<el-tree :data="regions" :highlight-current="true" accordion node-key="id" current-node-key="116594640928874496"
						 :props="defaultProps" @node-click="handleNodeClick">
						</el-tree>
					</div>
				</el-col>
				<el-col :span="20">
					<el-table :data="tableData" border :stripe="true" style="width: 100%;">
						<el-table-column prop="name" label="姓名">
						</el-table-column>
						<el-table-column prop="phone" label="手机号">
						</el-table-column>
						<el-table-column prop="gender" label="性别">
						</el-table-column>						
						<el-table-column prop="cardNum" label="身份证号">
						</el-table-column>
						<el-table-column prop="inTime" label="入职时间">
						</el-table-column>
						<el-table-column prop="moneyBackTime" label="返钱日期">
						</el-table-column>
						<el-table-column prop="introducerName" label="介绍人">
						</el-table-column>
						<el-table-column label="操作" width="245" fixed="right">
							<template slot-scope="scope">
								<el-button type="primary" @click="goEdit(scope.row)">修改入职信息</el-button>
								<el-button type="danger" @click="goDelete(scope.row)">离职</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="pagination" v-if="tableData.length != 0">
						<el-pagination @current-change="getTableList" :page-size="pageSize" :current-page.sync="pageNum" layout="total,prev, pager, next,jumper,slot"
						 :page-count="pages" :total="total">
						</el-pagination>
					</div>
				</el-col>
			</el-row>
		</div>
		<el-dialog title="员工管理" :visible.sync="dialogAddFormVisible" :close-on-click-modal="false">
			<div style="color:red;padding:0 30px 15px">*如果输入的手机号用户已在系统中，则会使用原手机号信息录入</div>
			<el-form :model="staffForm" label-position="left" label-width="100px" :rules="staffFormRule" ref="staffForm">
				<el-row>
					<el-col :span="11">
						<el-form-item label="介绍人" prop="introducerId">
							<el-select v-model="staffForm.introducerId" placeholder="请选择介绍人" style="width: 100%;">
								<el-option v-for="introducer in introducerList" :key="introducer.id" :label="introducer.name" :value="introducer.phone">
									<span style="float: left">{{ introducer.name }}</span>
									<span style="float: right; color: #8492a6; font-size: 13px">{{ introducer.phone }}</span>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="11" :offset="1">
						<el-form-item label="入职时间" prop="inTime">
							<el-date-picker v-model="staffForm.inTime" type="date" value-format="yyyy-MM-dd" placeholder="选择入职时间" style="width: 100%;">
							</el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="11">
						<el-form-item label="返钱时间">
							<el-date-picker v-model="staffForm.moneyBackTime" value-format="yyyy-MM-dd" type="date" placeholder="选择返钱时间"
							 style="width: 100%;">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="11" :offset="1">
						<el-form-item label="身份证号">
							<el-input v-model="staffForm.cardNum" placeholder="请输入身份证号"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="11">
						<el-form-item label="手机号" prop="phone">
							<el-input v-model="staffForm.phone" placeholder="请输入手机号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="11" :offset="1">
						<el-form-item label="密码">
							<span>密码为手机号后六位</span>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="11">
						<el-form-item label="姓名">
							<el-input v-model="staffForm.name" placeholder="请输入姓名"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="11" :offset="1">
						<el-form-item label="性别">
							<el-select v-model="staffForm.gender" placeholder="请选择性别" style="width: 100%;">
								<el-option v-for="item in sexList" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="11">
						<el-form-item label="地址">
							<el-input v-model="staffForm.address" placeholder="请输入地址"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="11" :offset="1">
						<el-form-item label="出生日期">
							<el-date-picker v-model="staffForm.birthday" value-format="yyyy-MM-dd" type="date" placeholder="选择出生日期" style="width: 100%;">
							</el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item>
					<el-button @click="dialogAddFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="save('staffForm')">保 存</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<!-- 离职弹窗 -->
		<el-dialog title="提示" :visible.sync="dialogOutDeptVisible" width="30%" :close-on-click-modal="false">
			<el-date-picker v-model="outTime" type="date" placeholder="选择离职日期">
			</el-date-picker>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogOutDeptVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveOut">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 修改入职信息弹窗 -->
		<el-dialog title="提示" :visible.sync="dialogUpdateVisible" width="30%" :close-on-click-modal="false">
			<el-form :model="updateForm" label-position="left" label-width="100px">
				<el-form-item label="介绍人">
					<el-select v-model="updateForm.introducerId" placeholder="请选择介绍人" style="width: 100%;">
						<el-option v-for="introducer in introducerList" :key="introducer.id" :label="introducer.name" :value="introducer.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="返钱时间">
					<el-date-picker v-model="updateForm.moneyBackTime" value-format="yyyy-MM-dd" type="date" placeholder="选择返钱时间"
					 style="width: 100%;">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="入职时间">
					<el-date-picker v-model="updateForm.inTime" type="date" value-format="yyyy-MM-dd" placeholder="选择入职时间" style="width: 100%;">
					</el-date-picker>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogUpdateVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveUpdate">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import md5 from 'js-md5'; //md5加密
	export default {
		name: 'staffManagement',
		data() {
			return {
				search_keyName:'',
				// currentId: '', //选中id
				outTime: '', //离职时间
				jobstaffId: '', //入职记录Id
				outInfo: {}, //离职信息
				dialogOutDeptVisible: false, //离职弹窗
				dialogAddFormVisible: false, //新增弹窗
				dialogUpdateVisible: false, //修改入职信息弹窗
				regions: [], //树状图数据列表
				introducerList: [], //介绍人列表
				defaultProps: { //树状图加载格式
					children: 'list',
					label: 'deptName'
				},
				sexList: [{
					id: 1,
					name: '男'
				}, {
					id: 2,
					name: '女'
				}],
				staffForm: {}, //新增员工表单
				staffFormRule: {
					inTime: [{
						required: true,
						message: '请选择入职时间',
						trigger: 'change'
					}],
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: 'blur'
					}],
				},
				updateForm: {}, //修改入职信息表
				tableData: [], //表数据							
				pageSize: 0,
				pageNum: 1,
				pages: 0,
				total: 0,
			}
		},
		watch: {
			// 监测 route 参数变化
			'$route'(to, from) {
				if (to.path == '/staffManagement') {
					this.getDept();
					this.getIntroducer();
				}
			}
		},
		mounted() {
			this.getDept();
			this.getIntroducer();
		},
		methods: {
			//搜索
			search(){
				this.getTableList();
			},
			//树状图点击事件
			handleNodeClick(data) {
				this.deptId = data.id;
				this.getTableList(1, data.id);
			},
			//获取左侧树状图数据
			getDept() {
				let that = this;
				that.HttpUtil.get(that, that.Global.URLPATH.DEPTLIST, {},
					function(res) {
						if (res.status == 0) {
							that.regions = res.data;
							for (let i = 0; i < res.data.length; i++) {
								that.regions[i].list = [];
							}
							that.deptId = that.regions[0].id;
							that.getTableList(1, res.data[0].id);
						}
					},
					function(res) {
						console.log(res.msg)
					}
				)
			},
			//获取介绍人列表
			getIntroducer() {
				let that = this;
				that.HttpUtil.get(that, that.Global.URLPATH.GETMANAGEUSERNOPAGE, {
					type: 4
				}, function(res) {
					if (res.status == 0) {
						that.introducerList = res.data;
					}
				}, function(res) {
					console.log(res.msg)
				})
			},
			//获取表数据
			getTableList(pageNum, deptId) {
				let that = this;
				this.tableData = [];
				deptId = deptId ? deptId : that.regions[0].id;
				pageNum = pageNum ? pageNum : that.pageNum;
				that.HttpUtil.get(that, that.Global.URLPATH.STAFFLIST, {
						type: 2,
						deptId: deptId,
						name:that.search_keyName,
						pageNum: pageNum,
						size: 10
					},
					function(res) {
						if (res.status == 0) {
							if (res.data.list.length == 0) {
								that.$message.warning('暂无数据！')
								that.tableData = [];
							} else {
								that.tableData = res.data.list;
								for (let i = 0; i < res.data.list.length; i++) {
									if (res.data.list[i].gender == 1) {
										that.tableData[i].gender = '男'
									} else {
										that.tableData[i].gender = '女'
									}
								}
								that.pages = res.data.pages;
								that.total = res.data.total;
								that.pageSize = res.data.pageSize;
								that.pageNum = res.data.pageNum;
							}
						}
					},
					function(res) {
						console.log(res.msg);
					}
				)
			},
			//新增
			goAdd() {
				let that = this;
				if (that.deptId) {
					that.staffForm = {};
					that.dialogAddFormVisible = true;
				} else {
					that.$message.danger('请选择厂！')
				}

			},
			// 保存员工信息
			save(formName) {
				let that = this;
				that.$refs[formName].validate((valid) => {
					if (valid) {
						that.HttpUtil.post(that, that.Global.URLPATH.INDEPT, {
								userName: that.staffForm.phone,
								deptId: that.deptId,
								inTime: that.staffForm.inTime,
								introducerId: that.staffForm.introducerId,
								moneyBackTime: that.staffForm.moneyBackTime,
								phone: that.staffForm.phone,
								name: that.staffForm.name,
								address: that.staffForm.address,
								gender: that.staffForm.gender,
								birthday: that.staffForm.birthday,
								cardNum: that.staffForm.cardNum
							},
							function(res) {
								if (res.status == 0) {
									that.dialogAddFormVisible = false;
									that.getTableList(1, that.regions[0].id);
									that.$message.success('保存成功！');
								}
							},
							function(res) {
								console.log(res.msg)
							}
						)
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			//离职
			goDelete(row) {
				this.dialogOutDeptVisible = true;
				this.outTime = "";
				this.outInfo = row;
			},
			//离职信息保存
			saveOut() {
				let that = this;
				that.HttpUtil.post(that, that.Global.URLPATH.OUTDEPT, {
					jsType: 1,
					userId: that.outInfo.userId,
					deptId: that.outInfo.deptId,
					introducerId: that.outInfo.introducerId,
					outTime: that.outTime
				}, function(res) {
					if (res.status == 0) {
						that.dialogOutDeptVisible = false;
						that.getTableList();
						that.$message.success('离职成功！')
					}
				}, function(res) {
					console.log(res.msg)
				})
			},
			//修改入职信息
			goEdit(row) {
				this.dialogUpdateVisible = true;
				this.jobstaffId = row.id; //入职记录id
				this.updateForm = row;
			},
			//保存修改后的入职信息
			saveUpdate() {
				let that = this;
				that.HttpUtil.put(that, that.Global.URLPATH.UPDATEJOBSTAFF, {
					id: that.jobstaffId,
					introducerId: that.updateForm.introducerId,
					inTime: that.updateForm.inTime,
					moneyBackTime: that.updateForm.moneyBackTime
				}, function(res) {
					if (res.status == 0) {
						that.dialogUpdateVisible = false;
						that.$message.success('修改成功！');
					}
				}, function(res) {
					console.log(res.msg)
				})
			},
		}
	}
</script>

<style>
	@import url("../../../assets/css/common.css");

	.handle-box {
		margin-bottom: 20px;
	}
</style>
